<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<script src="http://static.dongdaoz.com/libs/js/jquery-1.8.3.min.js" type="text/javascript"></script>
		<script type="text/javascript" src="js/echarts.js"></script>
		<script type="text/javascript" src="js/china.js"></script>
		<script type="text/javascript" src="js/guangdong.js"></script>
		<script type="text/javascript" src="js/dark.js"></script>
		<script>
			var textColor = "#02c1de";

			function randomData() {
				return Math.round(Math.random() * 1000);
			}
			//地图
			map = {
				title: {									//顶部标题
					text: '东道主人才企业大数据分布图',		//文字
					subtext: '',							//描述
					left: 'center',							//居中
					textStyle: {							//文字样式
						color: textColor
					}
				},
				tooltip: {									//鼠标移动到地图的提示框
					trigger: 'item',						//触发类型，默认数据触发，见下图，可选为：'item' | 'axis'
					formatter: function(params) {			//文字格式化
						var res = params.name + '<br/>';
						var myseries = map.series;
						for(var i = 0; i < myseries.length; i++) {
							res += myseries[i].name;
							var exist = false;
							for(var j = 0; j < myseries[i].data.length; j++) {
								if(myseries[i].data[j].name == params.name) {
									exist = true;
									res += ' : ' + myseries[i].data[j].value + '</br>';
								}
							}
							if(!exist) {
								res += ' : 0' + '</br>';
							}
						}
						return res;
					}
				},
				legend: {									//左上角图例
					orient: 'vertical',						//布局方式，默认为水平布局，可选为：'horizontal' | 'vertical'
					left: 'left',							//靠左
					data: ['企业数量', '人才数量'],			//设置显示文字
					selectedMode: 'multiple',				//设置左上角是否多选             single单选
					textStyle: {							//文字样式
						color: ['#a6d6ff', '#0d7ad4']
					}
				},
				visualMap: {								//视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素（视觉通道）。
					min: 0,									//最小值
					max: 200000,							//最大值
					left: 'left',							
					top: 'bottom',
					text: ['高', '低'], 						// 文本，默认为数值文本
					calculable: true,
					inRange: {								//由浅到深的颜色，可以设置3个
						color: ['#83d5fd', 'red']
					},
					textStyle: {							//文字样式
						color: textColor
					}
				},
				series: [{									//数据
					name: '企业数量',
					type: 'map',
					mapType: 'china',
					roam: false,							//是否开启滚轮缩放和拖拽漫游，默认为false（关闭），其他有效输入为true（开启），'scale'（仅开启滚轮缩放），'move'（仅开启拖拽漫游）
					label: {								//地图上的地区文字
						normal: {
							show: true
						},
						emphasis: {
							show: true
						}
					},
					itemStyle: {							//图形样式
						normal: {
							color: '#d736ff',
							areaColor: "#83d5fd"			//地图默认颜色
						}
					},
					data: [{
						name: '北京',
						value: 57869
					}, {
						name: '浙江',
						value: 65169
					}, {
						name: '上海',
						value: 54586
					}, {
						name: '广东',
						value: 100376
					}, {
						name: '贵州',
						value: 20704
					}, {
						name: '江苏',
						value: 32127
					}, {
						name: '四川',
						value: 40743
					}, {
						name: '陕西',
						value: 30411
					}, {
						name: '湖北',
						value: 47864
					}, {
						name: '天津',
						value: 28077
					}, {
						name: '河南',
						value: 23668
					}]
				}, {
					name: '人才数量',
					type: 'map',
					mapType: 'china',
					label: {
						normal: {
							show: true
						},
						emphasis: {
							show: true
						}
					},
					itemStyle: {
						normal: {
							color: '#dca910',
							areaColor: "#83d5fd"
						}
					},
					data: [{
						name: '北京',
						value: 344556
					}, {
						name: '浙江',
						value: 404668
					}, {
						name: '上海',
						value: 362275
					}, {
						name: '广东',
						value: 605437
					}, {
						name: '贵州',
						value: 122379
					}, {
						name: '江苏',
						value: 201845
					}, {
						name: '四川',
						value: 294041
					}, {
						name: '陕西',
						value: 161845
					}, {
						name: '湖北',
						value: 281402
					}, {
						name: '天津',
						value: 157371
					}, {
						name: '河南',
						value: 161460
					}]
				}]
			};
			
			//折线图
			axisRight = {
				title: {									//左部标题   				
					text: '东道主人才当天在线求职数',			//文字
					textStyle: {							//文字样式
						color: textColor
					}
				},
				tooltip: {									//提示框
					trigger: 'axis'							//触发类型，默认数据触发，见下图，可选为：'item' | 'axis'
				},
				legend: {									//上方图例
					data: [{name:'活跃度',					//图例文字和样式
						textStyle: {
							color: '#c670e0'
						}}],
					textStyle: {
						color: textColor
					}
				},
				grid: {										//直角坐标系内绘图网格
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				axisLabel: {								//坐标轴文本标签
					interval:0,
					textStyle: {
						color: textColor
					}
				},
				xAxis: [{									//x轴
					type: 'category',						//坐标轴类型，横轴默认为类目型'category'，纵轴默认为数值型'value'
					boundaryGap: true,						//数值轴两端是否留空白
					data: ['1:00', '2:00', '3:00', '4:00', '5:00', '6:00', '7:00', '8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '24:00'],
					axisLine: {								//x轴线样式
						lineStyle: {
							color: '#136c7b'
						}
					},
					axisLabel:{								//x轴标签样式
						show:true,
						interval:0
					}
				}],
				yAxis: [{									//y轴
					type: 'value',							//坐标轴类型，横轴默认为类目型'category'，纵轴默认为数值型'value'
					axisLine: {								//y轴线样式
						lineStyle: {
							color: '#136c7b'
						}
					},
					axisLabel : {							//y轴标签样式
		                formatter: '{value} 人'
		            },
					splitLine: {							//y轴分割线
						lineStyle: {
							color: '#136c7b'
						}
					}
				}],
				series: [{									//数据
					name: '活跃度',							
					type: 'line',
					stack: '总量',
					data: [],
					itemStyle: {							//图形样式
						normal: {
							color: '#c670e0',				//颜色
							lineStyle: {					//线的颜色
								color: "#c670e0"
							}
						}
					}
				}]
			};
			
			//折线图
			axisLeft = {
				title: {																	//左部标题
					text: '东道主' + (new Date().getMonth() + 1) + '月份每天面试频次量',		//文字
					subtext: '',
					textStyle: {															//文字颜色
						color: textColor
					}
				},
				tooltip: {										//提示框
					trigger: 'axis'								//触发类型，默认数据触发，见下图，可选为：'item' | 'axis'
				},
				legend: {										//上方图例
					data: [										//图例文字和样式
//					{
//						name: '企业数',
//						textStyle: {
//							color: '#c670e0'
//						}
//					}, {
//						name: '人才数',
//						textStyle: {
//							color: '#ebe7ae'
//						}
//					}, 
					{
						name: '面试频次',
						textStyle: {
							color: '#04b6d1'
						}
					}]
				},
				axisLabel: {									//坐标轴文本标签
					textStyle: {
						color: textColor
					}
				},
				xAxis: {										//x轴
					type: 'category',							////坐标轴类型，横轴默认为类目型'category'，纵轴默认为数值型'value'
					boundaryGap: true,							//数值轴两端是否留空白
					data: [],
					name:'天',									//x轴的名称单位
					nameTextStyle:{				
						color: textColor,
						align:'left'							
					},
					axisLabel: {								//x轴标签样式
						show: true,
						interval: 0
					},
					axisLine: {									//x轴线样式
						interval: 0,
						lineStyle: {
							color: '#136c7b'
						}
					}
				},
				yAxis: {										//y轴
					type: 'value',								//坐标轴类型，横轴默认为类目型'category'，纵轴默认为数值型'value'
					axisLabel: {								//标签格式化
						formatter: '{value}'
					},
					axisLine: {									//线样式
						lineStyle: {
							color: '#136c7b'
						}
					},
					splitLine: {								//分割线样式
						lineStyle: {
							color: '#136c7b'
						}
					}
				},
				series: [
//				{
//					name: '企业数',
//					type: 'line',
//					data: [],
//					itemStyle: {
//						normal: {
//							color: '#c670e0',
//							lineStyle: {
//								color: "#c670e0"
//							}
//						}
//					}
//				}, {
//					name: '人才数',
//					type: 'line',
//					data: [15, 12, 22, 35, 32, 52, 100],
//					itemStyle: {
//						normal: {
//							color: '#ebe7ae',
//							lineStyle: {
//								color: "#ebe7ae"
//							}
//						}
//					}
//				}, 
				{
					name: '面试频次',
					type: 'line',
					data: [],
					itemStyle: {
						normal: {
							color: '#04b6d1',
							lineStyle: {
								color: "#04b6d1"
							}
						}
					}
				}]
			};

			//柱状图
			axisLeftDown = {
				title: {									//左部标题
					text: '东道主数据年度增长趋势',			//文字
					subtext: '',
					textStyle: {							//文字样式
						color: textColor
					}
				},
				tooltip: {									//提示框
					trigger: 'axis'							//触发类型，默认数据触发，见下图，可选为：'item' | 'axis'
				},
				legend: {									//上方图例
					data: [{								//图例文字和样式
						name: '企业数',
						textStyle: {
							color: '#c670e0'
						}
					}, {
						name: '人才数',
						textStyle: {
							color: '#ebe7ae'
						}
					}, {
						name: '面试频次',
						textStyle: {
							color: '#04b6d1'
						}
					}]
				},
				axisLabel: {								//坐标轴文本标签
					textStyle: {
						color: textColor
					}
				},
				calculable: true,							//是否启用拖拽重计算特性
				xAxis: [{												//x轴
					type: 'category',									//坐标轴类型，横轴默认为类目型'category'，纵轴默认为数值型'value'
					data: ['2013年', '2014年', '2015年', '2016年'],
					axisLine: {											//x轴线样式
						lineStyle: {
							color: '#136c7b'
						}
					}
				}],
				yAxis: [{												//y轴
					type: 'value',										//坐标轴类型，横轴默认为类目型'category'，纵轴默认为数值型'value'
					axisLine: {											//y轴线样式
						lineStyle: {
							color: '#136c7b'
						}
					},
					splitLine: {										//y轴分割线
						lineStyle: {
							color: '#136c7b'
						}
					}
				}],
				series: [{
					name: '企业数',
					type: 'bar',
					data: [31860, 104830, 221534, 721353],
					itemStyle: {
						normal: {
							color: '#c670e0',
							lineStyle: {
								color: "#c670e0"
							},
							label: {
								show: true,
								position: 'top'
							}
						}
					}
				}, {
					name: '人才数',
					type: 'bar',
					data: [26840, 80503, 201354, 693734],
					itemStyle: {
						normal: {
							color: '#ebe7ae',
							lineStyle: {
								color: "#ebe7ae"
							},
							label: {
								show: true,
								position: 'top'
							}
						}
					}
				}, {
					name: '面试频次',
					type: 'bar',
					data: [42030, 93230, 238574, 849841],
					itemStyle: {
						normal: {
							color: '#04b6d1',
							lineStyle: {
								color: "#04b6d1"
							},
							label: {
								show: true,
								position: 'top'
							}
						}
					}
				}]
			};
		</script>
	</head>

	<body>
		<div class="Div">
			<div class="left fl">
				<!--左上-->
				<div class="left-top">
					<div id="axisLeftContainer" style="width: 100%;height:480px;"></div>
				</div>
				<!--左下-->
				<div class="left-bottom">
					<div id="axisLeftDownContainer" style="width: 100%;height:480px;"></div>
				</div>
			</div>
			<div class="right fr">
				<!--右上-->
				<div class="right-top">
					<div id="mapContainer" style="width: 100%;height:650px;"></div>
				</div>
				<!--右下-->
				<div class="right-bottom">
					<div id="axisRightContainer" style="width: 100%;height:240px;"></div>
				</div>
			</div>
		</div>
		<script type="text/javascript">

			// 东道主人才企业大数据分布图
			var myChart = echarts.init(document.getElementById('mapContainer'));

			// 使用刚指定的配置项和数据显示图表。
			myChart.setOption(map);

			
			getaxisRight();

			// 东道主人才 \\企业月数据统计
		    var myChart = echarts.init(document.getElementById('axisLeftContainer'));
			getAxisLeft();
			
			getAxisLeftDown();
			

			function getAxisLeft() {
				var today = new Date();
				if(!localStorage.getItem(today.getMonth() + today.getDate())) {
					var new_date = new Date(today.getYear(), today.getMonth() + 1, 1);
					var date_count = (new Date(new_date.getTime() - 1000 * 60 * 60 * 24)).getDate();
					var dateArray = [];
					var enterpriseData = [];
					var talentData = [];
					var frequencyData=[];
					for(i = 1; i <= date_count; i++) {
						dateArray.push(i);
						if(today.getDate()-1 >= i) {
//							enterpriseData[today.getDate() - i-1] = parseInt(Math.random() * (5000 - 2000 + 1) + 2000, 10);
//							talentData[today.getDate() - i-1] = parseInt(Math.random() * (5000 - 2000 + 1) + 2000, 10);
							frequencyData[today.getDate() - i-1] = parseInt(Math.random() * (5000 - 2000 + 1) + 2000, 10);
						} else {
							enterpriseData[i - 1] = '-';
							talentData[i - 1] = '-';
							frequencyData[i - 1] = '-';
						}
					}
					axisLeft.xAxis.data = dateArray;
//					axisLeft.series[0].data = enterpriseData;
//					axisLeft.series[1].data = talentData;
					axisLeft.series[0].data = frequencyData;
					localStorage.setItem(today.getMonth() + today.getDate(), JSON.stringify(axisLeft));
					myChart.setOption(axisLeft);
				} else {
					myChart.setOption(JSON.parse(localStorage.getItem(today.getMonth() + today.getDate())));
				}
			}

			function getaxisRight() {
				// 东道主人才当天在线求职数
				var myChart = echarts.init(document.getElementById('axisRightContainer'));
				var today = new Date();
				if(!localStorage.getItem(today.getMonth() + today.getDate()+today.getHours())) {
					var activeData = [];
					for(i = 0; i <= today.getHours(); i++) {
						if(i<=7) {
							activeData[i] = parseInt(Math.random() * (50 - 0 + 1) + 0, 10);
						} else if(i>7&&i<18){
							activeData[i] = parseInt(Math.random() * (1500 - 200 + 1) + 200, 10);
						}
						else{
							activeData[i] = parseInt(Math.random() * (50 - 0 + 1) + 0, 10);
						}
					}
					for (i = today.getHours(); i < 23; i++) {
						activeData[i] = '-';
					}
					axisRight.title.text='东道主人才 '+today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate()+' 在线求职数'
					axisRight.series[0].data = activeData;
					localStorage.setItem(today.getMonth() + today.getDate()+today.getHours(), JSON.stringify(axisRight));
					myChart.setOption(axisRight);
				} else {
					myChart.setOption(JSON.parse(localStorage.getItem(today.getMonth() + today.getDate()+today.getHours())));
				}
			}
			
			function getAxisLeftDown()
			{
				// 东道主数据年度增长趋势
				var myChart = echarts.init(document.getElementById('axisLeftDownContainer'));
				
				axisLeftDown.series[0].data[3]=axisLeftDown.series[0].data[3]+parseInt(Math.random() * 10+ 1, 10);
				axisLeftDown.series[1].data[3]=axisLeftDown.series[1].data[3]+parseInt(Math.random() * 10+ 1, 10);;
				axisLeftDown.series[2].data[3]=axisLeftDown.series[2].data[3]+parseInt(Math.random() * 10+ 1, 10);;
				myChart.setOption(axisLeftDown);
			}
			
			setInterval(getAxisLeftDown,60000);
		</script>
	</body>

</html>